<template>
  <div id="home">
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swiper">
      <van-swipe-item><img src="https://staticlive.douyucdn.cn/storage/webpic_resources/upload/slide/2017/0828/201708281533217578.jpg
  " alt=""></van-swipe-item>
      <van-swipe-item><img src="https://staticlive.douyucdn.cn/storage/webpic_resources/upload/slide/2017/0907/201709071732053454.png
  " alt=""></van-swipe-item>
      <van-swipe-item><img src="https://staticlive.douyucdn.cn/storage/webpic_resources/upload/slide/2017/0915/201709151037285098.jpg
  " alt=""></van-swipe-item>
      <van-swipe-item><img src="https://staticlive.douyucdn.cn/storage/webpic_resources/upload/slide/2017/0918/201709181538588580.jpg
  " alt=""></van-swipe-item>
    </van-swipe>
  <!-- 推荐直播房间 -->
    <ul>
      <li v-for="(list,index) in items" :key="index">
        <div class="home_title">
          <div class="left"><span class="log"><img :src="list.icon" alt=""></span>{{list.tabName}}<span class="nav_span" @click='toRoomlist(list)'>{{list.tabName}}</span> </div>
          <div class="right" @click='toRoomlist(list)'>更多<span>&gt;</span></div>
          </div>
        <div class="hot_rooms">
          <a :href="'https://m.douyu.com/'+item.rid" v-for="item in list.list" :key="item.rid">
          <div class="box">
            <img :src="item.roomSrc" alt="">
            <div class="roommessage">
              <div class="hn"><i class="iconfont icon-huo fire"></i>{{item.hn}}</div>
              <div class="anchor"><i class="iconfont icon-wode people"></i>{{item.nickname}}</div>
            </div>
          </div>
          <p class="roomtit">{{item.roomName}}</p>
        </a>
        </div>
      </li>
    </ul> 
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      items:{}
    }
  },
  created () {
    this.getDate()
    // this.testapi() 测试api
  },
  computed:{
    ...mapState(['shortName',"cateName"])
  },
  methods: {
    ...mapMutations(['setshortName','setcatename']),
    getDate(){
      this.$http.get('/api/home/mix').then(res=>{
        // this.data=res.data.data[0].list
        this.items=res.data.data
        console.log(this.items)
      })
    },
    toRoomlist(type){
      sessionStorage.cate2Name=type.tabName
      sessionStorage.shortName=type.shortName
      this.setshortName(type.shortName)
      this.setcatename(type.tabName)
      this.$router.push({
        path:'/roomList',
      })
    },
    // testapi(){
    //   this.$http.get("/api/room/list").then(res=>{
    //     console.log(res)
    //   })
    // }
  }
}
</script>
<style scoped>
html{
  font-size: 100px ;
}
body{
  font-size: 16px;
}
.swiper{
  width: 100%;
  height: 1.8rem;
}
.swiper  img{
  width: 100%;
  height: 1.8rem;
}
.room .room_img{
 position: relative;
  width: 1.72rem;
  overflow: hidden;
}
.room .room_img img{
 width: 100%;
}
#home{
  height: calc(100% - .5rem);
  overflow-y: scroll;
  overflow: auto;
}
 ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-left:.05rem; 
  justify-content: space-around
}
ul li {
  width: 100%;
}
li .home_title{
  display: flex;
  height: .42rem;
  align-items: center;
  justify-content: space-between;
}
li .home_title .left{
  font-size: .14rem;
  display: flex;
  align-items:center

}
li .home_title .nav_span{
  font-size: .12rem;
  margin-left: .15rem;
  padding:0 .1rem;
  border:.01rem solid #f70;
  border-radius: .105rem;
  color: #f70;
}
li .home_title .log{
  display: inline-block;
  width: .18rem;
  height: .18rem;
  border-radius: 50%;
  margin-right: .1rem;
  overflow: hidden;
}
li .home_title img{
  width: 100%;
}
li .home_title .right{
  font-size: .12rem;
  color: #999;
}
li .right span{
  display: inline-block;
  width: .13rem;
  height: .13rem;
  vertical-align: middle;
  margin-left: .05rem;
  line-height: .14rem;
border-radius: 50%;
background:#999;
color: white;
}
.hot_rooms{
  display: flex;
  flex-wrap: wrap;
}
.hot_rooms a{
  display: inline-block;
  width: 1.8rem;
  padding: 0 .05rem .05rem 0;
}
.hot_rooms .box{
   position: relative;
  border-radius: .05rem;
  overflow: hidden;
}
.hot_rooms .box img{
  width: 100%;
  vertical-align: top;
}

.hot_rooms .box p{
  width:100%;
  position: absolute;
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: .12rem;
  bottom: 0;
  left: 0;
  padding: .1rem;
}
.roommessage{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  color: white;
  font-size: .12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hn{
  text-align: right;
  padding: 0 .05rem 0 0;
}
.anchor{
  text-align: left;
  padding: 0 .05rem;
}
.fire,.people {
  font-size: .12rem
}
.roomtit{
  font-size: .12rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot_rooms li h4{
  font-size: .14rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
